<template>
  <div class="flight_lilter">
    <div class="flight_filter_row1">
      <div class="info">
        单程：{{ fliterInfo.departCity }} - {{ fliterInfo.destCity }} /
        {{ fliterInfo.departDate }}
      </div>
      <div class="fliter_form">
        <el-select
          v-model="selectValue[index]"
          :placeholder="item.placeholder"
          size="mini"
          class="fliter_sear"
          v-for="(item,index) in filterList"
          :key="index"
        >
          <el-option
            v-for="(item2,index2) in item.list"
            :key="index2"
            :label="item2.label"
            :value="item2.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="flight_filter_row2">
      <span
        >筛选：<el-button size="mini" round type="primary" plain @click="selectValue=['','','','']"
          >撤销</el-button
        ></span
      >
    </div>
  </div>
</template>

<script>
export default {
  props: ["fliterInfo", "filterOptions"],
  data () {
    return {
      // 四个筛选的值  用字符串 为了让自己阅读代码方便 设定默认值
      selectValue:["","","",""]
    }
  },
  // 监听点击选项
  watch:{
    selectValue(){
      // 传递给父页面
      this.$emit("filterValueChange",this.selectValue)
    }
  },
  mounted(){
    console.log(this.filterOptions);
  },
  computed: {
    filterList(){
      const list=[];
      // 机场数据
      list.push({
        placeholder:"起飞机场",
        list:this.filterOptions.airport.map(v=>({value:v,label:v}))
      })
      // 添加起飞时间
      list.push({
        placeholder:"起飞时间",
        list:this.filterOptions.flightTimes.map(v=>({value:`${v.from}|${v.to}`,label:`${v.from}:00-${v.to}:00`}))
      })
      // 添加航空公司
      list.push({
        placeholder:"航空公司",
        list:this.filterOptions.company.map(v=>({value:v,label:v}))
      })
      // 添加机型大小
      list.push({
        placeholder:"机型",
        list:[{label:"大",value:"L"},{label:"中",value:"M"},{label:"小",value:"S"}]
      })

      return list;
    }
  }
};
</script>

<style lang="less" scoped>
.flight_lilter {
  .flight_filter_row1 {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    .info {
      font-size: 13px;
    }
    .fliter_form {
      .fliter_sear {
        width: 120px;
      }
    }
  }
  .flight_filter_row2{
    display: flex;
    align-items: center;
    font-size: 13px;
    span{
      margin-right: 10px;
    }
  }
}
</style>